<template>
  <drawer title="学生详情" :footerVisible="false" :contentHeight="828" @close="close" @click="showPopover = false">
    <template #content>
      <div class="student-score-wrap">
        <div class="left-wrap">
          <n-scrollbar style="height: 100%">
            <div class="student-name-wrap">
              <div
                class="student-item"
                :class="{ active: selectedObj.studentInfo.id === item.studentInfo.id }"
                v-for="(item, i) in matchingPenData"
                :key="i"
                @click="selectTap(item)"
                >{{ item.studentInfo.name }}</div
              >
            </div>
          </n-scrollbar>
        </div>
        <div class="right-wrap" v-if="selectedObj.studentInfo">
          <n-popover :show="showPopover" raw :x="handwritingItemX" :y="handwritingItemY" trigger="manual" to="#screen" class="custom-popover">
            <div class="word-popover-info" v-if="currentWord">
              <div class="popover-header">单字分析</div>
              <div class="popover-inner">
                <div class="inner-left">
                  <div class="txt">书写表现</div>
                  <ExpressionEmoji :is-big="true" :icon="currentWord.writeInfo.icon" />
                  <div class="chart-bg">
                    <studentRadar :isWhite="true" :listData="currentWord.radarData" />
                  </div>
                </div>
                <div class="inner-right">
                  <div class="comment-item">
                    <div class="comment-tag">优点</div>
                    <div class="comment-text">
                      <div v-for="text in currentWord.jsonData.scope.advantageList">{{ text }}。</div>
                      <div v-if="currentWord.jsonData.scope.advantageList.length === 0">无</div>
                    </div>
                  </div>
                  <div class="comment-item">
                    <div class="comment-tag bad-tag">缺点</div>
                    <div class="comment-text">
                      <div v-for="text in currentWord.jsonData.scope.disadvantageList">{{ text }}。</div>
                      <div v-if="currentWord.jsonData.scope.disadvantageList.length === 0">无</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </n-popover>

          <div class="avatar-wrap">
            <avatar :size="44" :src="selectedObj.studentInfo.pic" />
            <div class="student-name">{{ selectedObj.studentInfo.name }}</div>
          </div>
          <n-scrollbar style="height: 100%" v-if="studentData">
            <div class="word-wrap" v-for="group in studentData.wordData" :key="group.wordTemplateId">
              <div class="word-group">
                <div class="word-group-left">
                  <Handwriting :image="group.wordTemplateUrl" label="样例" :isTemplateUrl="true" :emojiVisible="false" />
                </div>
                <div class="word-group-right">
                  <Handwriting v-for="(item, i) in group.data" :key="i" :image="item.writeInfo.image" :label="item.writeInfo.label" :icon="item.writeInfo.icon" @click.stop="(e) => {
                    handwritingItemTap(e, item)
                  }" />
                  <Handwriting v-for="x in group.maxIndex - group.data.length" :key="x" :imageVisible="false" :emojiVisible="false" />
                </div>
              </div>
<!--              <div class="word-info" v-if="currentWord">-->
<!--                <div class="info-left">-->
<!--                  <div class="score-bg">-->
<!--                    <ExpressionEmoji :is-big="true" :icon="currentWord.writeInfo.icon" />-->
<!--                    <div class="txt">书写表现</div>-->
<!--                  </div>-->
<!--                  <div class="chart-bg">-->
<!--                    <studentRadar :listData="currentWord.radarData" />-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="info-right">-->
<!--                  <div class="comment-item">-->
<!--                    <div class="comment-tag">优点</div>-->
<!--                    <div class="comment-text">-->
<!--                      笔迹分析：<span v-for="text in currentWord.jsonData.scope.advantageList">{{ text }}。</span>-->
<!--                      <span v-if="currentWord.jsonData.scope.advantageList.length === 0">无</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                  <div class="comment-item">-->
<!--                    <div class="comment-tag bad-tag">缺点</div>-->
<!--                    <div class="comment-text">-->
<!--                      笔迹分析：<span v-for="text in currentWord.jsonData.scope.disadvantageList">{{ text }}。</span>-->
<!--                      <span v-if="currentWord.jsonData.scope.disadvantageList.length === 0">无</span>-->
<!--                    </div>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
            </div>
          </n-scrollbar>
        </div>
      </div>
    </template>
  </drawer>
</template>

<script setup lang="ts">
  import Handwriting from '@/views/components/Handwriting/index.vue';
  import studentRadar from '@/views/components/studentRadarItem/radar.vue';
  import ExpressionEmoji from "@/views/components/ExpressionEmoji/index.vue";
  import {computed, onBeforeMount, onUnmounted, reactive, ref} from 'vue';
  import {useCourse} from "@/store/modules/course";
  import {actionSqliteData, ipc} from "@/utils/ipcRenderer";
  import {storage} from "@/utils/Storage";

  const props = defineProps({
    realTimeData: {
      type: Object,
      default: () => {}
    },
    initSelectItem: {
      type: Object,
      default: () => {}
    }
  })
  onBeforeMount(() => {
    selectTap(props.initSelectItem)
  })
  const selectedObj: any = ref({
    mac: '',
    studentInfo: null
  });
  const currentWord = ref(null)
  const matchingPenData = computed(() => {
    return useCourse().getCoursePenData.filter((item) => item.studentInfo);
  });

  const studentData = ref<any>(null)
  async function selectTap(item) {
    selectedObj.value = item;
    studentData.value = props.realTimeData[item.studentInfo.id];
  }
  async function refreshData(){
    studentData.value = props.realTimeData[selectedObj.value.studentInfo.id];
  }
  defineExpose({
    selectTap,
    refreshData,
  })
  const emits = defineEmits(['close', 'change']);
  function close() {
    emits('close');
  }
  function confirm() {
    emits('change', selectedObj.value);
  }
  onUnmounted(() => {
  })
  const handwritingItemX = ref(0);
  const handwritingItemY = ref(0);
  const showPopover = ref(false)
  const screenScale = storage.get('screen-scale', 1)
  function handwritingItemTap(e, item) {
    handwritingItemX.value = e.clientX / screenScale
    handwritingItemY.value = e.clientY / screenScale
    showPopover.value = true;
    currentWord.value = item;
    console.log(showPopover.value)
  }
</script>

<style scoped lang="less">
  ::v-deep(.drawer-header) {
    background-color: #fff !important;
    border-bottom: 2px solid #e6eaed;
  }
  .student-score-wrap {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;

    .left-wrap {
      width: 200px;
      height: 100%;
      border-right: 2px solid #e6eaed;
    }
    .student-name-wrap {
      padding: 24px 12px;
    }
    .student-item {
      font-size: 21px;
      height: 48px;
      line-height: 48px;
      padding: 0 24px;
      border-radius: 12px;
      margin-bottom: 12px;
      cursor: pointer;
      &.active {
        background-color: rgba(235, 97, 0, 0.08);
        color: #eb6100;
      }
    }
    .right-wrap {
      width: 1720px;
      height: 100%;
      padding: 20px 36px;
    }
    .avatar-wrap {
      display: flex;
      align-items: center;
      .student-name {
        color: #1e232b;
        font-size: 30px;
        line-height: 44px;
        margin-left: 6px;
      }
    }
    .word-wrap {
      padding: 24px 0;
      position: relative;
      .word-group {
        display: flex;
        flex-wrap: wrap;
        .word-group-left{
          border-right: 1px solid #E6EAED;
          margin-right: 36px;
        }
        .word-group-right{
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          margin-bottom: -24px;
        }
        .handwriting-item {
          margin-right: 36px;
          margin-bottom: 24px;
          position: relative;
        }
      }
    }

    .word-info {
      height: 200px;
      background-color: #f6f8f9;
      border-radius: 12px;
      padding: 16px 20px;
      display: flex;
      align-items: center;
      .info-left {
        width: 380px;
        display: flex;
        border-right: 2px solid #e6eaed;
        .score-bg {
          width: 136px;
          height: 168px;
          border-radius: 12px;
          background-color: #fefbf9;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          border: 2px solid #fff;
          .emoji-wrap {
            width: 64px;
            height: 64px;
          }
          .txt {
            font-size: 21px;
            color: #1e232b;
            margin-top: 4px;
          }
        }
        .chart-bg {
          width: 168px;
          height: 168px;
          margin: 0 36px;
        }
      }
      .info-right {
        flex: 1;
        padding: 0 36px;
      }
      .comment-item {
        display: flex;
        margin: 12px 0;
        .comment-tag {
          width: 60px;
          height: 30px;
          border: 2px solid rgba(54, 159, 255, 0.2);
          background-color: #eff8ff;
          color: #369fff;
          font-size: 18px;
          text-align: center;
          line-height: 24px;
          border-radius: 6px;
          margin-right: 12px;
          &.bad-tag {
            border-color: rgba(233, 73, 73, 0.2);
            color: #e94949;
            background-color: #fef1f1;
          }
        }
        .comment-text {
          flex: 1;
          color: #676b70;
          font-size: 21px;
          line-height: 30px;
        }
      }
    }
  }
</style>
